import React, { useEffect, useState } from 'react';
import { Card, Col, Row, List } from 'antd';
import axios from 'axios';
import _ from "lodash"

export default function News() {
    const [dataSource, setdataSource] = useState([])
    useEffect(() => {
        axios.get("/news?punlishState=2&_expand=category").then(res => {
            setdataSource(Object.entries(_.groupBy(res.data, item => item.category.title)))
        })

    }, [])

    return (
        <div style={{ margin: "30px 30px" }}>
            {/* 标题-副标题 */}
            <div style={{ margin: "30px 30px" }}>
                <span style={{ paddingLeft: "10px", fontSize: "24px", fontWeight: "600" }}>全球大新闻</span>
                <span style={{ paddingLeft: "10px", fontSize: "12px", color: "gray" }}>查看新闻</span>
            </div>

            <Row gutter={[16, 36]}>
                {
                    dataSource.map((item, index) =>
                        <Col span={8} key={index}>
                            <Card title={item[0]} bordered={true} hoverable={true} >
                                <List
                                    size="small"
                                    // header={<div>用户最常浏览 <BarChartOutlined /></div>}
                                    // footer={<div>Footer</div>}
                                    // bordered
                                    dataSource={item[1]}
                                    pagination={{ pageSize: 3 }}
                                    renderItem={(item) => <List.Item><a href={`#/detail/${item.id}`} >{item.title}</a></List.Item>}
                                />
                            </Card>
                        </Col>
                    )
                }
            </Row>
        </div>
    )
}
